<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div>
        <p>1</p>

        <!-- 插入 100个span  -->
        <h3>222</h3>
    </div>



    <script>

        // 回流和重绘的概念

        var oH3 = document.querySelector('h3');
        var oBox = document.querySelector('div');


        // 创建一个标签就插入一个    ---- 就回流一次

        // for (var i = 0; i < 100; i++) {
        //     var oSpan = document.createElement('span');
        //     oSpan.innerHTML = i + 1;
        //     oBox.insertBefore(oSpan, oH3);
        // }


        // 创建文档碎片   --- 隐形的打包盒
        var fragment = document.createDocumentFragment();
        for (var i = 0; i < 100; i++) {
            var oSpan = document.createElement('span');
            oSpan.innerHTML = i + 1;
            fragment.appendChild(oSpan);
        }
        // 一次性把创建好的所有标签插入到页面   只回流一次
        oBox.insertBefore(fragment, oH3);


    </script>

</body>

</html>